<template>
  <div class="tab-switch p-2px bg-#F5F7FB rounded-10px flex cursor-pointer">
    <div 
      v-for="(item,index) in list" 
      class="px-20px py-8px" 
      :class="{'active': val == index+1 }"
      @click="change(index)"
    >{{item}}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  list:{
    type:Array,
    default:()=>{
      return []
    }
  },
  value:{
    type: Number,
    default: 1,
    required: true
  }
})
const emit = defineEmits(["update:modelValue", 'change']);

// 选中项
const val = ref(props.value) 

// 切换
function change(index){
  val.value = index+1
  emit("update:modelValue", val.value);
  emit('change', val.value)
}
</script>

<style lang="less">
.tab-switch{
  .active{
    background-color: var(--component-background);
    border-radius: 10px;
    color: #209EE4;
  }
  div{
    outline:none;
    user-select: none;
  }
}
</style>